<template>
  <div class="goods-bg">
    <div class="app-container goods-search" id="search">
      <!-- 商品列表 -->
      <div class="mt14">
        <!-- 遍历商品详情 -->
        <div class="mb6 fl" v-for="(goods, index) in allSearchResult" :key="index" :class="{mr6: index == 0 || (index + 1) % 4 != 0}" v-if="allSearchResult.length > 0">
          <goods-item :goods-info="goods" :theme="6"></goods-item>
        </div>
        <div class="mb6 fl bgImg" v-show="allSearchResult.length == 0"></div>
        <!-- 分页 -->
        <!-- <w-paging class="paging" v-show="totalPage > 1" :current="currentPage" :total="totalPage" @on-page="getNextPageData"></w-paging> -->
        <div class="clear"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { queryListByGoodsIds } from 'js/api'

  // 商品组件
  import goodsItem from './components/GoodsItem'

  export default {
    data() {
      return {
        goodsId: [], // 商品ID
        goodsIdList: [], // 商品IDs数组
        allSearchResult: {}
      }
    },
    components: {
      goodsItem
    },
    created() {
      this.fetchQueryListByGoodsIds()
    },
    methods: {
      fetchQueryListByGoodsIds() {
        const goodsIds = sessionStorage.getItem('goodsIds')
        this.goodsId = goodsIds.split(',')
        this.goodsId.forEach(item => {
          this.goodsIdList.push(item)
        })
        queryListByGoodsIds(this.goodsIdList).then(data => {
          this.allSearchResult = data.goodsList
        })
      }
    }
  }
</script>
<style lang="scss">
  .goods-bg {
    .m-paging {
      margin: 50px 0 0 !important;
    }
  }
</style>
<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .goods-bg {
    background-color: $color-white;
    margin-top: -10px;
    margin-bottom: -45px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 50px;
  }
  .goods-search {
    border-top: 1px solid #ccc;
    margin-top: 10px;
  }
  .ma10 {
    margin: 10px 0px;
  }
  .mt14 {
    margin-top: 14px;
  }
  .mr6 {
    margin-right: 6px;
  }
  .mb6 {
    margin-bottom: 6px;
  }
  .fl {
    float: left;
  }
  .clear {
    clear: both;
  }
  .search-number {
    color: #999999;
    margin: 18px 0px 22px 0px;
  }
  .paging {
    float: left;
    width: 100%;
  }
  .bgImg {
    background-image: url(/static/img/icon_null.45ca649.png);
    margin: 50px auto auto;
    width: 100%;
    height: 420px;
    background-repeat: no-repeat;
    text-align: center;
    background-size: contain;
    background-position: 50% 50%;
  }
</style>